.wrapper {
  display: flex;
  overflow: hidden;
  min-height: 100vh;
  flex-direction: column;
  position: relative;
}
.wrap {
  flex: 1 0 auto;
  display: flex;
  position: relative;
  margin-top: 0px;
  background: url(../images/welcome.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.welcome-box {
  flex: 1 0 auto;
  align-self: center;
  text-align: center;
}
.welcome-box-center {
  width: 336px;
}
.welcome-a {
  color: #fff;
}
.welcome-a:hover,
.welcome-a:focus {
  color: #fff;
  text-decoration: none;
}
.info {
  position: absolute;
  top: 0px;
  left: 0px;
}
:global {
  .info-page {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    z-index: 100;
    transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
  }
  .info-page.open {
    width:1800px;
    height:1800px;
    top: -840px;
    left: -847.5px;
    transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  }

  @media only screen and (min-width: 64em) {
    .info-page.open {
      width:3600px;
      height:3600px;
      top: -1680px;
      left: -1695px;
    }
  }

  .info-page-content {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    margin-top: 0px;
    opacity: 0;
    transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  }
  .info-page-content.open {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 100;
    opacity: 1;
    transition-delay: 300ms;
    transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  }
}